<template>
    <view>
        <van-popup :show="show" custom-class="popup-container" round position="bottom" root-porta z-index="99999" @click-overlay="cancel">
            <view class="title-container">
                <view class="cancel" @tap="cancel">取消</view>
                <view class="title">证书类型</view>
                <view class="submit" @tap="submit">确定</view>
            </view>
            <van-cascader
                v-if="showCascader"
                swipeable
                :closeable="false"
                :value="initValue"
                :show-header="false"
                :options="options"
                :field-names="fieldNames"
                @finish="onFinish"
            ></van-cascader>
        </van-popup>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            showCascader: false,
            options: [],
            options: [],
            fieldNames: {
                text: 'name',
                value: 'code',
                children: 'children'
            },
            chooseCertificate: {}
        };
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        type: {
            type: Number,
            default: 0
        },
        initValue: {
            type: String
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            this.getCertificateTemplate();
        },

        getCertificateTemplate() {
            app.globalData.apis.project
                .getCertificateTemplate({
                    type: this.type
                })
                .then((res) => {
                    if (!res.data) {
                        return;
                    }
                    this.setData({
                        options: res.data
                    });
                });
        },

        onFinish(e) {
            this.chooseCertificate = e.detail;
        },

        submit() {
            this.$emit('choosecertificate', {
                detail: this.chooseCertificate
            });
            this.$emit('cancel');
        },

        cancel() {
            this.$emit('cancel');
            setTimeout(() => {
                this.setData({
                    showCascader: false
                });
            }, 200);
        }
    },
    created: function () {},
    watch: {
        show: {
            handler: function (value) {
                if (value) {
                    this.setData({
                        showCascader: value
                    });
                }
            },

            immediate: true
        }
    }
};
</script>
<style>
.popup-container {
    display: flex;
    flex-direction: column;
}

.title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32rpx;
    height: 48px;
    background-color: #f5f7fb;
}

.title-container .cancel {
    font-size: 34rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4b567f;
}

.title-container .title {
    font-size: 34rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 550;
    color: #1e253f;
}

.title-container .submit {
    font-size: 34rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #3f64fa;
}
</style>
